@import "common";

@orange : #e86c4f;

html{width: auto;margin: 0;}
body{height: auto;background-color: #f3f3f3;}

//手机端
html,body,#body{width: 100%;height: 100%;}

.fixed-box{display: none;}

nav{
    position: fixed;height: 100/@rem;padding: 15/@rem;min-width: 100%;background-color: #fff;
    .logo{width: 310/@rem;height:70/@rem;background: url("/src/img/logo-1.png") center center / contain no-repeat;}
    .list{display: none;}
    &.scroll{
        position: fixed;box-shadow: none;padding: 15/@rem;height: 100/@rem;
        .logo{width: 310/@rem;height:70/@rem;background-image: url("/src/img/logo-1.png");margin: 0;}
    }
}

.btn-winner{
    position: fixed;top: 22/@rem;right: 20/@rem;z-index: 1000;height: 56/@rem;
    img{height: 100%;}
}

.swiper-container{width: 100%;height: 100%;}
.swiper-slide{padding-top: 100/@rem;box-sizing: border-box;background: center top / cover no-repeat;position: relative;
    > *{position: absolute;}
    &.page1{
        background-image: url("/src/img/mobile/slide-bg-1.jpg");
        .con{width: 297/@rem;top: 325/@rem;left: 311/@rem;}
    }
    &.page2{
        background-image: url("/src/img/mobile/slide-bg-2.jpg");
        .con{width: 142/@rem;top: 577/@rem;left: 88/@rem;}
        .text{width: 476/@rem;top: 620/@rem;left: 88/@rem;line-height: 36/@rem;font-size: 18/@rem;text-align: justify;}
    }
    &.page3{
        background-image: url("/src/img/mobile/slide-bg-3.jpg");
        .tit{width: 526/@rem;top: 387/@rem;left: 55/@rem;}
        .text1{width: 369/@rem;top: 480/@rem;left: 83/@rem;}
        .text2{width: 470/@rem;top: 587/@rem;left: 83/@rem;}
    }
    &.page4{
        background-image: url("/src/img/mobile/slide-bg-4.jpg");
        .tit{width: 640/@rem;top: 187/@rem;left: 0;}
        .text1{width: 500/@rem;top: 355/@rem;left: 60/@rem;}
        .text2{width: 500/@rem;top: 800/@rem;left: 60/@rem;}
        .text3{width: 500/@rem;top: 940/@rem;left: 50/@rem;}
        .btn{width: 200/@rem;top: 675/@rem;left: 220/@rem;
            img{display: block;}
        }
    }
    &.page5{
        background-image: url("/src/img/mobile/slide-bg-5.jpg");
        .tit{width: 526/@rem;top: 210/@rem;left: 57/@rem;}
        .btn1{width: 200/@rem;top: 420/@rem;left: 223/@rem;}
        .btn2{width: 200/@rem;top: 587/@rem;left: 223/@rem;}
    }
    &.page6{
        background-image: url("/src/img/mobile/slide-bg-6.jpg");background-position: center bottom -2px;
        .tit{width: 452/@rem;top: 220/@rem;left: 92/@rem;}
        .text{width: 470/@rem;top: 400/@rem;left: 82/@rem;}
    }
    .foot{width: 100%;bottom: 64/@rem;left: 0;font-size: 20/@rem;text-align: center;color: #999;}
}

.music{
    position: absolute; width: 60/@rem; height: 60/@rem; right: 3%; top: 10%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-size: 100%; opacity: 0.5; z-index: 4;
    background: url("/src/img/mobile/music2.png") 0 0/contain #000 no-repeat; z-index:9999;
    &.on{
        background: url("/src/img/mobile/music.png") 0 0/contain #000 no-repeat;
        animation: music 9.5s linear 0s normal none infinite;
        -webkit-animation: music 9.5s linear 0s normal none infinite;	/* Safari 和 Chrome */
    }
}
@keyframes music{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes music{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}